{% load staticfiles %}
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
    <script src="{% static 'js/vue.min.js' %}"></script>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        h1{
            margin: 0;
            text-align: center;
            background:#ccc;
            display: block;
            height:60px;
            line-height: 60px;
        }
        table{
            width:80% !important;
            margin:20px auto;
        }
        table thead th{
            text-align: center;
        }
        table tbody th{
            width:20%;
            text-align: right;
        }
         table tbody td{
             text-align: center;
             font-weight: bold;
         }
        .current_time{
            text-align: center;
            font-size:20px;
            font-weight: bold;
        }
    </style>
    <title>成都富晟座椅订单看板系统</title>
</head>
<body>
{#    {% verbatim %}#}
    <div id="app">
        <h1>订单看板</h1>
        <table style="" class="table table-default table-bordered table-condensed table-striped table-hover">
            <thead>
                <tr><th>车型</th><th>基本型</th><th>舒适型</th><th>豪华黑</th><th>豪华红</th></tr>
            </thead>
            <tbody>
                <tr><th>今日订单数量</th>
                    <td v-for="item in send_info.fis_send">[[ item ]]</td>
                </tr>
                <tr><th>今日自动发货数量</th>
				<td v-for="item in send_info.auto_sended">[[ item ]]</td>
				</tr>
                <tr><th>今日手动发货数量</th>
				<td v-for="item in send_info.man_sended">[[ item ]]</td>
				</tr>
                <tr><th>今日合计发货数量</th>
				<td v-for="item in send_info.code_sended">[[ item ]]</td>
				</tr>
                <tr><th>今日待发货数量</th>
				<td v-for="item in send_info.remaining_send">[[ item ]]</td>
				</tr>
            </tbody>
        </table>
{#        <input type="text" name="message">#}
{#        <input type="button" value="发送消息给服务器" onclick="sendMessage()">#}
        <div class="current_time">当前时间:[[current_time]]</div>
    </div>
{#    {% endverbatim %}#}




<script>
    var vm = new Vue({
        delimiters:['[[', ']]'],
        el:'#app',
        data(){
            return{
                send_info:{
                    fis_send: [0, 0, 0, 0],
                    auto_sended: [0, 0, 0, 0],
                    man_sended: [0, 0, 0, 0],
                    code_sended: [0, 0, 0, 0],
                    remaining_send: [0, 0, 0, 0]
                },
                ws:undefined,
                current_time:undefined
            }
        },
        methods:{
            sendMessage(){
                console.log($('input[name="message"]')[0].value)
                this.ws.send($('input[name="message"]')[0].value)
            },
            displayCurrentTime(){
                console.log(123);
                var _this = this
                setInterval(function(){
                    _this.current_time = _this.timeFormat(new Date(),'yyyy-mm-dd hh:MM:ss')
                },1000);
            },
            timeFormat(time, fmStr) {
                const weekCN = '一二三四五六日';
                const weekEN = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];

                let year = time.getFullYear();
                let month = time.getMonth() + 1;
                let day = time.getDate();
                let hours = time.getHours();
                let minutes = time.getMinutes();
                let seconds = time.getSeconds();
                let milliSeconds = time.getMilliseconds();
                let week = time.getDay();

                month = month >= 10 ? month : ('0' + month);
                day = day >= 10 ? day : ('0' + day);
                hours = hours >= 10 ? hours : ('0' + hours);
                minutes = minutes >= 10 ? minutes : ('0' + minutes);
                seconds = seconds >= 10 ? seconds : ('0' + seconds);

                if (fmStr.indexOf('yyyy') !== -1) {
                    fmStr = fmStr.replace('yyyy', year);
                } else {
                    fmStr = fmStr.replace('yy', (year + '').slice(2));
                }
                fmStr = fmStr.replace('mm', month);
                fmStr = fmStr.replace('dd', day);
                fmStr = fmStr.replace('hh', hours);
                fmStr = fmStr.replace('MM', minutes);
                fmStr = fmStr.replace('ss', seconds);
                fmStr = fmStr.replace('SSS', milliSeconds);
                fmStr = fmStr.replace('W', weekCN[week - 1]);
                fmStr = fmStr.replace('ww', weekEN[week - 1]);
                fmStr = fmStr.replace('w', week);
                return fmStr;
            }
        },
        mounted(){
            this.displayCurrentTime()
            if("WebSocket" in window){
                this.ws = new WebSocket('ws://localhost:8001/getFisInfo/');
                var _this = this
                this.ws.onopen = function(){
                    //连接服务端,如果连接成功发送数据到服务端
                    console.log('连接服务器成功');
                    _this.ws.send('客户端:已连接到服务器')
                };
                this.ws.onmessage = function(data){
                    //打印服务端返回的数据
                    var data_rlt = JSON.parse(data.data)
                    _this.send_info.fis_send = data_rlt.fis_send
                    _this.send_info.auto_sended = data_rlt.auto_sended
                    _this.send_info.man_sended = data_rlt.man_sended
                    _this.send_info.code_sended = data_rlt.code_sended
                    _this.send_info.remaining_send = data_rlt.remaining_send
                    console.log(_this.send_info.auto_sended)
                };
                this.ws.onclose = function () {
                    // 关闭 websocket
                    alert("服务器连接已关闭.重新连接请刷新浏览器");
                };

            }else{
                alert('您的浏览器不支持websoket,请切换为IE内核的浏览器访问')
            }
        }
    });

</script>
</body>
</html>